<template>
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="visible"
       top="30px"
       width="70%"
      >
      <el-form class="Addform" :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="130px">
        <!-- <div class="demo-basic--circle left" prop="header">
          <el-upload
            class="upload-demo"
            :show-file-list="false"
            action="/header/upload"
            :headers="headers"
            :data="dataForm"
            :on-success="onSuccess"
            :disabled="dataForm.id !== 0"
          >
            <div class="block"><el-avatar :size="200" :src="dataForm.header" alt="头像"></el-avatar></div>
          </el-upload>
        </div> -->
        <div class="right">
          <el-row>
            <el-col :span="8">
              <el-form-item label="员工工号" prop="workId" style="width: 100%">
                <el-input v-model="dataForm.workId" :disabled="dataForm.id !== 0" style="width: 100%"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="员工姓名" prop="name" style="width: 100%">
                <el-input v-model="dataForm.name" :disabled="dataForm.id !== 0" style="width: 100%"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="手机号码" prop="phone" style="width: 100%">
                <el-input v-model="dataForm.phone" :disabled="dataForm.id !== 0" style="width: 100%" ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row >
            <el-col :span="8">
              <el-form-item label="邮箱" prop="email" style="width: 100%">
                <el-input v-model="dataForm.email" :disabled="dataForm.id !== 0" style="width: 100%" ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="身份证号" prop="idCard" style="width: 100%">
                <el-input v-model="dataForm.idCard" :disabled="dataForm.id !== 0" style="width: 100%" ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="出生日期" prop="birthday" style="width: 100%">
                <el-date-picker
                  v-model="dataForm.birthday"
                  type="date"
                  placeholder="选择日期"
                  :disabled="dataForm.id !== 0"
                  style="width: 100%">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row >
            <el-col :span="8">
              <el-form-item label="民族" prop="nation.name">
                <el-select v-model="dataForm.nationId" placeholder="选择民族" :disabled="dataForm.id !== 0" style="width: 100%">
                  <el-option
                  v-for="item in nations"
                  :key="item.id"
                  :value="item.id"
                  :label="item.name">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="籍贯" prop="nativePlace" >
                <el-input v-model="dataForm.nativePlace" placeholder="籍贯" :disabled="dataForm.id !== 0" style="width: 100%"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="联系地址" prop="address" >
                <el-input v-model="dataForm.address" placeholder="住址" :disabled="dataForm.id !== 0" style="width: 100%"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row >
            <el-col :span="8">
              <el-form-item label="政治面貌" prop="politicsStatus.name">
                <el-select v-model="dataForm.politicId" :disabled="dataForm.id !== 0" style="width: 100%" >
                  <el-option
                  v-for="item in politicsStatuss"
                  :key="item.id"
                  :value="item.id"
                  :label="item.name">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="性别" prop="gender" style="width: 100%">
                <el-radio-group v-model="dataForm.gender" :disabled="dataForm.id !== 0" style="width: 100%" >
                  <el-radio label="男" value="男"></el-radio>
                  <el-radio label="女" value="女"></el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="学历" prop="tiptopDegree" style="width: 100%">
                <el-input v-model="dataForm.tiptopDegree" :disabled="dataForm.id !== 0" style="width: 100%" ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="毕业院校" prop="school" >
                <el-input v-model="dataForm.school" :disabled="dataForm.id !== 0" style="width: 100%" ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="专业名称" prop="specialty" >
                <el-input v-model="dataForm.specialty" :disabled="dataForm.id !== 0" style="width: 100%"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="员工状态" prop="workState" style="padding: 0px 7.2px; width: 100%">
                <el-select v-model="dataForm.workState" :disabled="dataForm.id !== 0" style="width: 100%" >
                  <el-option
                  v-for="(item, index) in workState"
                  :key="index"
                  :value="item"
                  :label="item">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row >
            <el-col :span="8">
              <el-form-item label="所属部门" prop="department.name"  style="padding: 0px 7.5px">
                <el-select v-model="dataForm.departmentId" :disabled="dataForm.id !== 0" style="width: 100%" >
                  <el-option
                  v-for="item in departments"
                  :key="item.id"
                  :value="item.id"
                  :label="item.name">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="职位" prop="position.name">
                <el-select v-model="dataForm.posId" :disabled="dataForm.id !== 0" style="width: 100%" >
                  <el-option
                  v-for="item in positions"
                  :key="item.id"
                  :value="item.id"
                  :label="item.name">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="职称" prop="jobLevel.name">
                <el-select v-model="dataForm.jobLevelId" :disabled="dataForm.id !== 0" style="width: 100%" >
                  <el-option
                  v-for="item in joblevels"
                  :key="item.id"
                  :value="item.id"
                  :label="item.name">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row >
            <el-col :span="8">
              <el-form-item label="入职日期" prop="beginDate" style="width: 100%">
                <el-date-picker
                  v-model="dataForm.beginDate"
                  type="date"
                  placeholder="选择日期"
                  :disabled="dataForm.id !== 0"
                  style="width: 100%"
                  >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="转正日期" prop="conversionTime" >
                <el-date-picker
                  v-model="dataForm.conversionTime"
                  type="date"
                  placeholder="选择日期"
                  :disabled="dataForm.id !== 0"
                  style="width: 100%"
                  >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="合同起始日期" prop="beginContract" >
                <el-date-picker
                  v-model="dataForm.beginContract"
                  type="date"
                  placeholder="选择日期"
                  :disabled="dataForm.id !== 0"
                  style="width: 100%"
                  >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row >
            <el-col :span="8">
              <el-form-item label="合同截至日期" prop="endContract" >
                <el-date-picker
                  v-model="dataForm.endContract"
                  type="date"
                  placeholder="选择日期"
                  :disabled="dataForm.id !== 0"
                  style="width: 100%"
                  >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="聘用形式" prop="engageForm" style="width: 100%">
                <el-radio-group v-model="dataForm.engageForm" :disabled="dataForm.id !== 0" style="width: 100%">
                  <el-radio label="劳动合同" value="劳动合同"></el-radio>
                  <el-radio label="劳务合同" value="劳务合同"></el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="婚姻状态" prop="wedlock" >
                <el-radio-group v-model="dataForm.wedlock" :disabled="dataForm.id !== 0" style="width: 100%">
                  <el-radio label="已婚" value="已婚"></el-radio>
                  <el-radio label="未婚" value="未婚"></el-radio>
                  <el-radio label="离异" value="离异"></el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button v-if="dataForm.id === 0" @click="visible = false">取消</el-button>
        <el-button type="primary" v-if="dataForm.id === 0" @click="dataFormSubmit">新增</el-button>
        <el-button type="primary" v-if="dataForm.id !== 0" @click="visible = false">确定</el-button>
      </span>
    </el-dialog>
</template>

<script>
import { checkMax20000, validateName, validatePhone, validateEMail, ID, isSelect } from '../../utils/rules'
export default {
  name: 'OthersAddOrUpdate',
  data() {
    return {
      headers: {
        Authorization: window.sessionStorage.getItem('tokenStr')
      },
      visible: false,
      dataForm: {
        id: 0,
        workId: null,
        name: null,
        gender: null,
        wedlock: null,
        birthday: null,
        idCard: null,
        nation: {
          id: null,
          name: null
        },
        nativePlace: null,
        politicsStatus: {
          id: null,
          name: null
        },
        email: null,
        phone: null,
        address: null,
        department: {
          id: null,
          name: null
        },
        jobLevel: {
          id: null,
          name: null
        },
        position: {
          id: null,
          name: null
        },
        engageForm: null,
        tiptopDegree: null,
        specialty: null,
        school: null,
        beginDate: null,
        workState: null,
        contractTerm: null,
        conversionTime: null,
        beginContract: null,
        endContract: null,
        header: null,
        selfIntr: null
      },
      // dataForm2: {
      //   name: '',
      //   gender: '',
      //   birthday: '',
      //   idCard: '',
      //   wedlock: '',
      //   nationId: '', // 名族id
      //   nativePlace: '',
      //   politicId: '', // 政治信息id
      //   email: '',
      //   phone: '',
      //   address: '',
      //   departmentId: null, // 部门信息id
      //   jobLevelId: '', // 职称id
      //   posId: '', // 职位id
      //   engageForm: '',
      //   tiptopDegree: '', // 学历
      //   specialty: '', // 专业
      //   school: '',
      //   beginDate: '',
      //   workState: '', // 前端直接写死
      //   workId: '', // 工号
      //   contractTerm: '',
      //   conversionTime: '',
      //   beginContract: '', // 合同开始前日期
      //   endContract: '', // 合同结束日期
      //   selfIntr: '' // 备注～
      // },
      dataRule: {
        workId: [
          { required: true, message: '请填写员工工号', trigger: 'blur' },
          { validator: checkMax20000, message: '工号为8位长度的数字', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请填写员工姓名', trigger: 'blur' },
          { validator: validateName, message: '请正确填写姓名', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入电话号码', trigger: 'blur' },
          { validator: validatePhone, trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请填写邮箱', trigger: ['blur', 'change'] },
          { type: 'email', validator: validateEMail, trigger: 'blur' }
        ],
        idCard: [
          { required: true, message: '请填写二代身份证号码', trigger: 'blur' },
          { validator: ID, trigger: 'blur' }
        ],
        birthday: [
          { required: true, message: '请选择出生日期', trigger: 'blur' }
        ],
        beginDate: [
          { required: true, message: '请输入入职日期', type: 'date', trigger: 'change' }
        ],
        beginContract: [
          { required: true, message: '请选择合同形式', trigger: 'change' }
        ],
        gender: [
          { required: true, message: '请选择性别', trigger: 'blur' }
        ],
        wedlock: [
          { required: true, message: '请选择婚姻状态', trigger: 'blur' }
        ],
        nationId: [
          { required: true, message: '请选择民族', trigger: 'blur' }
        ],
        nativePlace: [
          { required: true, message: '请填写籍贯', trigger: 'blur' }
        ],
        politicId: [
          { required: true, message: '请选择政治面貌', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请填写联系地址', trigger: 'blur' }
        ],
        departmentId: [
          { required: true, message: '请选择部门', trigger: 'blur' }
        ],
        jobLevelId: [
          { required: true, message: '请选择职称', trigger: 'blur' }
        ],
        posId: [
          { required: true, message: '请选择职位', trigger: 'blur' }
        ],
        engageForm: [
          { required: true, message: '请选择聘用形式', trigger: 'blur' }
        ],
        tiptopDegree: [
          { required: true, message: '请填写学历', trigger: 'blur' }
        ],
        specialty: [
          { required: true, message: '请填写专业', trigger: 'blur' }
        ],
        school: [
          { required: true, message: '请填写毕业院校', trigger: 'blur' }
        ],
        workState: [
          { required: true, message: '请选择工作状态', trigger: 'blur' }
        ],
        conversionTime: [
          { required: true, message: '请选择转正日期', trigger: 'blur' }
        ],
        endContract: [
          { required: true, message: '请选择合同截至日期', trigger: 'blur' }
        ]
      },
      workState: ['在职', '实习', '退休'],
      nations: [], // 民族
      departments: [], // 部门
      joblevels: [], // 职称
      positions: [], // 职位
      politicsStatuss: [] // 政治面貌
    }
  },
  props: {
    close: {
      type: Function
    }
  },
  methods: {
    onSuccess() {
      this.init()
    },
    // 打开弹窗时，进行初始化
    init(data) {
      this.visible = true
      this.initData()
      if (data !== undefined) {
        this.dataForm = data
      } else {
        this.dataForm = {
          id: 0,
          workId: null,
          name: null,
          gender: null,
          birthday: null,
          wedlock: null,
          idCard: null,
          nationId: null,
          nation: {
            id: null,
            name: null
          },
          nativePlace: null,
          politicId: null,
          politicsStatus: {
            id: null,
            name: null
          },
          email: null,
          phone: null,
          address: null,
          departmentId: null,
          department: {
            id: null,
            name: null
          },
          jobLevelId: null,
          jobLevel: {
            id: null,
            name: null
          },
          posId: null,
          position: {
            id: null,
            name: null
          },
          engageForm: null,
          tiptopDegree: null,
          specialty: null,
          school: null,
          beginDate: null,
          workState: null,
          contractTerm: null,
          beginContract: null,
          endContract: null,
          header: null,
          selfIntr: null
        }
      }
      console.log('this.dataForm', this.dataForm.id)
    },
    // 获取一些选择框数据
    initData() {
      if (!window.sessionStorage.getItem('nations')) {
        this.getRequest('/sys/nations').then((resp) => {
          if (resp) {
            this.nations = resp.data
            window.sessionStorage.setItem('nations', JSON.stringify(resp.data))
          }
        })
      } else {
        this.nations = JSON.parse(window.sessionStorage.getItem('nations'))
      }
      if (!window.sessionStorage.getItem('departments')) {
        this.getRequest('/admin/deps').then((resp) => {
          if (resp) {
            this.departments = resp.data
            window.sessionStorage.setItem('departments', JSON.stringify(resp.data))
          }
        })
      } else {
        this.departments = JSON.parse(window.sessionStorage.getItem('departments'))
      }
      if (!window.sessionStorage.getItem('joblevels')) {
        this.getRequest('/sys/jobLevels').then((resp) => {
          if (resp) {
            this.joblevels = resp.data
            window.sessionStorage.setItem('joblevels', JSON.stringify(resp.data))
          }
        })
      } else {
        this.joblevels = JSON.parse(window.sessionStorage.getItem('joblevels'))
      }
      if (!window.sessionStorage.getItem('positions')) {
        this.getRequest('/sys/allPos').then((resp) => {
          if (resp) {
            this.positions = resp.data
            window.sessionStorage.setItem('positions', JSON.stringify(resp.data))
          }
        })
      } else {
        this.positions = JSON.parse(window.sessionStorage.getItem('positions'))
      }
      if (!window.sessionStorage.getItem('politicsStatuss')) {
        this.getRequest('/sys/politics').then((resp) => {
          if (resp) {
            this.politicsStatuss = resp.data
            window.sessionStorage.setItem('politicsStatuss', JSON.stringify(resp.data))
          }
        })
      } else {
        this.politicsStatuss = JSON.parse(window.sessionStorage.getItem('politicsStatuss'))
      }
    },
    // 将表单转换为后端需要的数据
    // Formconversion() {
    //   this.dataForm2.name = this.dataForm.name
    //   this.dataForm2.gender = this.dataForm.gender
    //   this.dataForm2.birthday = this.dataForm.birthday
    //   this.dataForm2.idCard = this.dataForm.idCard
    //   this.dataForm2.wedlock = this.dataForm.wedlock
    //   this.dataForm2.nationId = this.dataForm.nationId
    //   this.dataForm2.nativePlace = this.dataForm.nativePlace
    //   this.dataForm2.politicId = this.dataForm.politicsId
    //   this.dataForm2.email = this.dataForm.email
    //   this.dataForm2.phone = this.dataForm.phone
    //   this.dataForm2.address = this.dataForm.address
    //   this.dataForm2.departmentId = this.dataForm.departmentId
    //   this.dataForm2.jobLevelId = this.dataForm.jobLevelId
    //   this.dataForm2.posId = this.dataForm.positionId
    //   this.dataForm2.engageForm = this.dataForm.engageForm
    //   this.dataForm2.tiptopDegree = this.dataForm.tiptopDegree
    //   this.dataForm2.specialty = this.dataForm.specialty
    //   this.dataForm2.school = this.dataForm.school
    //   this.dataForm2.beginDate = this.dataForm.beginDate
    //   this.dataForm2.workState = this.dataForm.workState
    //   this.dataForm2.workId = this.dataForm.workId
    //   this.dataForm2.contractTerm = this.dataForm.contractTerm
    //   this.dataForm2.conversionTime = this.dataForm.conversionTime
    //   this.dataForm2.beginContract = this.dataForm.beginContract
    //   this.dataForm2.endContract = this.dataForm.endContract
    //   this.dataForm2.selfIntr = this.dataForm.selfIntr
    // },
    // 表单提交
    dataFormSubmit() {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          this.postRequest('/admin/emp', this.dataForm).then((resp) => {
            if (resp) {
              this.visible = false
              this.close()
            } else {
              console.log('表单提交失败')
            }
          }, console.error())
        } else {
          this.$message.error('表单未填写完')
        }
      })
    }
  }
}
</script>

<style>
@import '../../assets/css/form.css';
/* #addprodialog {
  position: absolute;
} */
/** 表单 start */
.Addform{
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}
/**================================= 左边 头像区 start ==========================*/
.Addform .left{
  width: 17%;
  padding-left: 0px;
}
/** 切换头像区域 */
.Addform .left .upload-demo{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 2vh;
}
/** 文字 */
.Addform .left .upload-demo .el-upload__tip {
  width: 100%;
  text-align: center;
  font: 0.6vw '宋体';
}
/**================================= 左边 头像区 end ==========================*/
/**================================= 右边 表单区 start ==========================*/
.Addform .right{
  width: 100%;
  margin-left: 0.5vw;
}
/**================================= 右边 表单区 end ==========================*/
</style>
